<template>
	<view class="detail">
		<image class="photo" :src="info.imageUrl"></image>
		<view v-if="info.tags && info.tags.length" class="tags">
			<view class="item" v-for="item in info.tags">
				{{item}}
			</view>
		</view>
		<view class="share">
			
			<button class="shareBtn" open-type="share">分享</button>
			<image class="icon" src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/Share-three.png" mode=""></image>
			分享
		</view>

		<view class="step" style="padding-bottom: 0;">
			<view class="info">
				<view class="name">
					<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/User.png" mode=""></image>
					个人信息
				</view>
				<view class="more" @click="grxxtoggleCollapse">
					{{ grxxisCollapsed ? '展开' : '收起' }}
				</view>
			</view>
			<view class="intro" :class="{ collapsed: grxxisCollapsed }">

				<baseInfo :info="info.nameValueDtoList" />


			</view>
		</view>

		<view class="step">
			<view class="info">
				<view class="name">
					<image src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/Oval-love-two.png" mode=""></image>
					期望另一半信息
				</view>
				<view class="more" @click="lybtoggleCollapse">
					{{ lybisCollapsed ? '展开' : '收起' }}
				</view>
			</view>
			<view class="intro" style="border-bottom: none;" :class="{ collapsed:lybisCollapsed }">
				<infoForOther :info="info.memberHope" />

			</view>
		</view>

		<view v-if="miniinfo" class="fixbottom">
			<view class="box">
				<view class="left">
					<image class="icons" :src="miniinfo.avatar" mode=""></image>
					<view class="names">
						<view class="top">
							{{miniinfo.realName}}
						</view>
						<view class="bot">
							红娘
						</view>
					</view>
				</view>
				<view class="right">
					<view @click="getWX()" class="item">
						加微信
					</view>
					<view class="item phone" @click="phone(miniinfo.mobile)">
						打电话
						<!-- <u-button shape="circle" type="error" :ripple="true" ripple-bg-color="#d7d8da">
							打电话
						</u-button> -->
					</view>
				</view>
			</view>
		</view>

		<u-popup border-radius="8" mode="center" v-model="wxMask">
			<view style="padding: 30rpx;" >
				<!-- <image show-menu-by-longpress="true" src="https://mk001.oss-cn-hangzhou.aliyuncs.com/222/67555ae093a5bbd502bdb8a8e42752c.jpg" mode="widthFix"></image> -->
				<image show-menu-by-longpress="true"  :src="miniinfo.weiXinImageUrl" mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		shareMixins
	} from "../../../common/share.js"
	import baseInfo from "./baseInfo.vue"
	import infoForOther from "./infoForOther.vue"

	export default {
		components: {
			baseInfo,
			infoForOther
		},
		
		mixins: [shareMixins],
		data() {
			return {
				shareMixins: {
					path: '/pages/sys/app/index'
				},
				miniinfo: null,
				info: null,
				grxxisCollapsed: false,
				lybisCollapsed: false,
				wxMask: false
			}
		},
		onLoad(e) {
			this.getInfo(e.id)
			this.getminiUserInfo(e.miniUserId)
			
			wx.showShareMenu({
			    menus: ['shareAppMessage', 'shareTimeline'],//'shareAppMessage'打开分享好友功能 | 'shareTimeline'打开分享到朋友圈功能
			});
		},
		methods: {
			
			onShareAppMessage(e) {
				console.log(e,'!!!!!##');
				let shareobj = {
					title: this.info.memberHope.note, //分享的标题
				}
				return shareobj //一定要返回对象
			},


			getWX() {
				this.wxMask = true
			},
			getminiUserInfo(miniUserId) {
				this.$u.api
					.miniUserInfo({
						miniUserId
					})
					.then((res) => {
						console.log(res, 777777);
						this.miniinfo = res?.data
					});
			},
			phone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});

			},
			getInfo(memberId) {
				this.$u.api
					.shareMemberDetail({
						memberId
					})
					.then((res) => {
						console.log(res, 777777);
						this.info = res?.data
					});
			},
			grxxtoggleCollapse() {
				this.grxxisCollapsed = !this.grxxisCollapsed;
			},
			lybtoggleCollapse() {
				this.lybisCollapsed = !this.lybisCollapsed;
			},
		}
	}
</script>
<style scoped lang="scss">
	.fixbottom {
		position: fixed;
		padding-bottom: 100rpx;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		padding-top: 30rpx;
		background: #fff;

		.box {
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.icons {
					width: 72rpx;
					height: 72rpx;
					margin-right: 16rpx;
					border-radius: 50%;
				}

				.names {
					.top {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
					}

					.bot {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #FA4A53;
						line-height: 36rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				.item {
					width: 148rpx;
					height: 64rpx;
					border: 2rpx solid #FA4A53;
					border-radius: 72rpx 72rpx 72rpx 72rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #FA4A53;
					line-height: 40rpx;

					&.phone {
						margin-left: 20rpx;
						background: #FA4A53;
						color: #fff;
					}
				}
			}
		}
	}

	.detail {
		padding-bottom: 240rpx;
	}

	.photo {
		height: 400rpx;
		width: 100%;
		display: block;
	}

	.tags {
		padding: 32rpx;
		display: flex;
		flex-wrap: wrap;

		.item {
			border-radius: 88rpx 88rpx 88rpx 88rpx;
			background: rgba(255, 237, 238, 1);
			margin-right: 16rpx;
			padding: 13rpx 32rpx;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 24rpx;
			color: #FA4A53;
			line-height: 28rpx;
			margin-bottom: 20rpx;
		}
	}

	.share {
		position: relative;
		margin: 0 32rpx 16rpx;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 500;
		font-size: 28rpx;
		color: #FA4A53;
		line-height: 33rpx;
		// width:100%;
		height: 70rpx;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		border: 2rpx solid #FA4A53;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon {
			width: 32rpx;
			height: 32rpx;
		}
		.shareBtn{
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			top: 0;
			background: pink;
			opacity: 0;
		}
	}

	.step {

		padding: 0 32rpx 24rpx;


		.info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.name {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 28rpx;
				color: #FA4A53;
				line-height: 40rpx;
				display: flex;
				align-items: center;


				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
			}

			.more {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #5C6B8B;
				line-height: 33rpx;
			}

		}

		.open {
			margin-bottom: 24rpx;
			margin-top: 20rpx;

			.openstatus {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 33rpx;

				text {}
			}

			.tips {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 20rpx;
				color: rgba(15, 20, 23, 0.4);
				line-height: 23rpx;
				margin-top: 14rpx;
			}
		}

		.intro {
			overflow: hidden;
			transition: max-height 0.3s ease-out;
			max-height: 1000px;
			/* 一个足够大的值，表明默认展开 */
			margin-bottom: 24rpx;
			border-bottom: 1rpx solid rgba(245, 245, 245, 1);
			margin-top: 8rpx;

			.words {
				flex: 1;
				// margin-right: 40rpx;
				text-align: justify;
			}

			.phone {
				image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.itemCont {
				.li {
					display: flex;
					align-items: center;
				}
			}
		}

		.collapsed {
			max-height: 0;
			/* 当条件类collapsed生效时，内容收起 */
		}
	}
</style>
